<template>
  <div>
    <div class="detail">
      <h2>{{newsTitle}}</h2>
      <p class="time hairlines-bottom">发布时间: {{time}}</p>
      <div class="content" v-html="content">

      </div>
    </div>
    <footer class="fixed-footer">
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  import $ from 'edom'
  export default {
    name: 'newsDetail',
    data () {
      return {
        title: '爱尚丰',
        newsTitle: '',
        time: 'XXXX-XX-XX XX:XX:XX',
        content: ''
      }
    },
    methods: {
      getDetail () {
        this.axios.post('/api/user/detail', {
          msg_id: this.$route.params.id,
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        })
        .then((res) => {
          let data = res.data
          let desc = data.desc
          this.newsTitle = desc.title
          this.content = desc.content
          this.time = $().timeTransform(desc.send_time)
        })
      },
      back () {
        this.$router.go(-1)
      }
    },
    created () {
      this.setTitle(this.title)
      this.getDetail()
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  
  .detail{
    margin-bottom: rem(100);
    padding: 0 rem(24);
    h2{
      padding: rem(45) 0 rem(20);
      font-size: rem(36);
      color: #141414;
    }
    .time{
      padding-bottom: rem(20);
      font-size: rem(24);
      color: #666;
    }
    .content{
      padding: rem(20) 0;
      font-size: rem(26);
      color: #333;
      overflow: hidden;
      img{
        max-width: 100%;
      }
    }
  }
</style>
